<template>
  <div class="admin-page">
    <!-- 搜索与操作区 -->
    <div class="admin-header">
      <el-input v-model="params.name" placeholder="姓名" class="search-input"></el-input>
      <el-input v-model="params.phone" placeholder="电话" class="search-input"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="findBySearch">查询</el-button>
      <el-button @click="reset">清空</el-button>
      <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
    </div>
    <!-- 管理员卡片列表 -->
    <div class="admin-card-list">
      <el-card
        v-for="item in tableData"
        :key="item.id"
        class="admin-card"
        shadow="hover"
      >
        <div class="admin-card-title">
          <i class="el-icon-user"></i>
          {{ item.name }}
          <span class="role-tag" :class="item.role === 'ROLE_ADMIN' ? 'admin' : 'user'">
            {{ item.role === 'ROLE_ADMIN' ? '管理员' : '普通用户' }}
          </span>
        </div>
        <div class="admin-card-content">
          <div><b>性别：</b>{{ item.sex || '未填写' }}</div>
          <div><b>年龄：</b>{{ item.age || '未填写' }}</div>
          <div><b>电话：</b>{{ item.phone || '未填写' }}</div>
        </div>
        <div class="admin-card-footer">
          <el-button size="mini" type="primary" @click="edit(item)">编辑</el-button>
          <el-popconfirm title="确认删除该记录？" @confirm="del(item.id)">
            <el-button slot="reference" size="mini" type="danger" style="margin-left: 10px;">删除</el-button>
          </el-popconfirm>
        </div>
      </el-card>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageNum"
        :page-sizes="[5,10,15,20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 弹窗表单 -->
    <el-dialog title="管理员信息" :visible.sync="dialogFormVisible" width="420px">
      <el-form :model="form" label-width="60px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio v-model="form.sex" label="男">男</el-radio>
          <el-radio v-model="form.sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="form.role" placeholder="请选择">
            <el-option label="管理员" value="ROLE_ADMIN"></el-option>
            <el-option label="普通用户" value="ROLE_USER"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      params: {
        name: '',
        phone: '',
        pageNum: 1,
        pageSize: 5,
      },
      tableData: [],
      total: 0,
      dialogFormVisible: false,
      form: {},
    }
  },
  created() {
    this.findBySearch()
  },
  methods: {
    findBySearch(){
      request.get("/admin/search", {
        params: this.params
      }).then(res =>{
        if(res.code === '0'){
          this.tableData = res.data.list
          this.total = res.data.total;
        }
      })
    },
    del(id){
      request.delete("/admin/" + id).then(res => {
        if (res.code === "0") {
          this.$message.success("操作成功");
          this.findBySearch();
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    add(){
      this.form = {};
      this.dialogFormVisible = true
    },
    edit(obj){
      this.form = Object.assign({}, obj);
      this.dialogFormVisible = true
    },
    reset(){
      this.params = {
        name: '',
        phone: '',
        pageNum: 1,
        pageSize: 5,
      }
      this.findBySearch();
    },
    handleSizeChange(pageSize){
      this.params.pageSize = pageSize;
      this.findBySearch();
    },
    handleCurrentChange(pageNum){
      this.params.pageNum = pageNum;
      this.findBySearch();
    },
    submit(){
      request.post("/admin", this.form).then(res =>{
        if(res.code === "0"){
          this.$message.success("操作成功");
          this.dialogFormVisible = false;
          this.findBySearch();
        }
      })
    }
  }
}
</script>

<style scoped>
.admin-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 12px 40px 12px;
  background: #f7fafd;
  min-height: 100vh;
}
.admin-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.search-input {
  width: 220px;
}
.admin-card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
  margin-bottom: 24px;
}
.admin-card {
  width: 340px;
  min-height: 140px;
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  transition: box-shadow 0.2s;
  margin-bottom: 10px;
}
.admin-card:hover {
  box-shadow: 0 8px 32px rgba(64,158,255,0.15);
  transform: translateY(-4px) scale(1.02);
}
.admin-card-title {
  font-size: 18px;
  color: #409EFF;
  font-weight: 600;
  margin-bottom: 8px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-tag {
  font-size: 13px;
  border-radius: 10px;
  padding: 2px 10px;
  margin-left: 10px;
  color: #fff;
}
.role-tag.admin {
  background: #409EFF;
}
.role-tag.user {
  background: #67c23a;
}
.admin-card-content {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 12px;
  word-break: break-all;
  padding-left: 4px;
}
.admin-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #f0f0f0;
  padding: 8px 0 8px 0;
}
.block {
  margin-top: 20px;
  text-align: center;
}
.dialog-footer {
  text-align: right;
  padding: 20px 0 0;
}
@media (max-width: 900px) {
  .admin-card-list {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .admin-card {
    width: 98%;
  }
}
</style>